<template>
  <div class="box">
    <el-form ref="formRef" :model="form" :inline="true" class="search">
      <el-form-item :label="t('common.time')" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          range-separator="To"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">{{
          t("common.queryText")
        }}</el-button>
      </el-form-item>
    </el-form>
    <div class="chart-box">
      <div class="left block">
        <div class="top">
          <productBar />
        </div>
        <div class="bottom"></div>
      </div>
      <div class="right block">
        <div class="top"></div>
        <div class="bottom"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { initTime } from "@/utils";
import productBar from "./component/productBar.vue";
import { useI18n } from "vue-i18n";
let { t } = useI18n();

let form = reactive({
  time: initTime(),
});

function query() {}
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  padding: 10px;
  padding-bottom: 0;
  .search {
    height: 40px;
  }
  .chart-box {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    .left {
      width: 60%;
      margin-right: 10px;
    }
    .right {
      flex: 1;
    }
    .block {
      height: 100%;
      .top {
        width: 100%;
        height: 50%;
        border: 1px solid #999;
      }
      .bottom {
        margin-top: 10px;
        width: 100%;
        height: calc(50% - 10px);
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
